<template>
  <div class="tabbar">
    <TabbarItem link="/home">
      <img src="~assets/img/tabbar/home.svg" slot="icon">
      <img src="~assets/img/tabbar/home_active.svg" slot="active-icon" >
      <div slot="text">首页</div>
    </TabbarItem>
    <TabbarItem link="/category">
      <img src="~assets/img/tabbar/category.svg" slot="icon">
      <img src="~assets/img/tabbar/category_active.svg" slot="active-icon" >
      <div slot="text">分类</div>
    </TabbarItem>
    <TabbarItem link="/cart">
      <img src="~assets/img/tabbar/cart.svg" class="tabbar-img" slot="icon">
      <img src="~assets/img/tabbar/cart_active.svg" slot="active-icon" >
      <div slot="text">购物车</div>
    </TabbarItem>
    <TabbarItem link="/profile">
      <img src="~assets/img/tabbar/profile.svg" slot="icon">
      <img src="~assets/img/tabbar/profile_active.svg" slot="active-icon" >
      <div slot="text">我的</div>
    </TabbarItem>
  </div>
</template>

<script>
import TabbarItem from './tabbarItem'
export default {
  name: 'tabbar',
  components: {
    TabbarItem
  }
}
</script>

<style lang='stylus' scoped>
.tabbar
  position: fixed
  display flex
  bottom 0
  left 0
  width 100%vw
  height 50px
  text-align center
  background-color #f6f6f6
  border-top: 1px solid #eee;
  box-shadow: 0px -1px 1px rgba(150, 150, 150, 0.08)
  z-index: 9
</style>

